<template>
	<view class="exam-container" :style="containerStyle">
		<!-- 顶部标题 -->
		<view class="header" :style="{ paddingTop: safeDistance + 'px' }">
			<view class="header-content">
				<text class="header-title">知识测试</text>
				<text class="header-subtitle">选择技术栈进行测试</text>
			</view>
			
			<!-- 显示模式切换按钮 -->
			<view class="display-mode-toggle" @click="toggleDisplayMode">
				<text class="toggle-icon" :class="{ 'grid-icon': !isListMode }">{{ isListMode ? '☰' : '▤' }}</text>
			</view>
			
			<view class="test-badge">
				<text class="badge-icon">🏆</text>
			</view>
		</view>

		<!-- 技术列表 -->
		<scroll-view class="tech-scroll" scroll-y show-scrollbar="false" refresher-enabled
			:refresher-triggered="refreshing" @refresherrefresh="handleRefresh" refresher-background="transparent">
			
			<!-- 列表视图 -->
			<view v-if="isListMode" class="tech-list">
				<view v-for="tech in techs" :key="tech.id" class="tech-card"
					@click="handleStartExam(tech)">
					<view class="card-body">
						<!-- 头部信息 -->
						<view class="card-header">
							<text class="tech-icon">{{ tech.icon }}</text>
							<view class="tech-info">
								<text class="tech-name">{{ tech.name }}</text>
								<text class="tech-difficulty">难度：<text class="difficulty-stars">{{ getDifficultyStars(tech.level) }}</text></text>
							</view>
							<view class="start-button">
								<text class="start-icon">▶</text>
							</view>
						</view>

						<!-- 描述 -->
						<text class="tech-description">{{ tech.description }}</text>

						<!-- 标签 -->
						<view class="tech-tags">
							<view v-for="(tag, index) in tech.tagsArray" :key="index" class="tag">
								<text class="tag-text">{{ tag }}</text>
							</view>
						</view>

						<!-- 底部信息 -->
						<view class="card-footer">
							<view class="info-item">
								<text class="info-icon">📝</text>
								<text class="info-text">10题</text>
							</view>
							<view class="info-item">
								<text class="info-icon">⏱</text>
								<text class="info-text">20分钟</text>
							</view>
							<view class="info-item">
								<text class="info-icon">⭐</text>
								<text class="info-text">100分</text>
							</view>
						</view>
					</view>
				</view>
			</view>

			<!-- 网格视图 -->
			<view v-if="!isListMode" class="tech-grid">
				<view v-for="tech in techs" :key="tech.id" class="grid-tech-card"
					@click="handleStartExam(tech)">
					<view class="grid-card-body">
						<!-- 头部信息 -->
						<view class="grid-card-header">
							<text class="grid-tech-icon">{{ tech.icon }}</text>
							<text class="grid-tech-name">{{ tech.name }}</text>
						</view>

						<!-- 描述 -->
						<text class="grid-tech-description">{{ tech.description }}</text>

						<!-- 标签 -->
						<view class="grid-tech-tags">
							<view v-for="(tag, index) in tech.tagsArray.slice(0, 2)" :key="index" class="grid-tag">
								<text class="grid-tag-text">{{ tag }}</text>
							</view>
							<text v-if="tech.tagsArray.length > 2" class="grid-more-tags">+{{ tech.tagsArray.length - 2 }}</text>
						</view>

						<!-- 底部信息 -->
						<view class="grid-card-footer">
							<view class="grid-info-items">
								<view class="grid-info-item">
									<text class="grid-info-icon">📝</text>
									<text class="grid-info-text">10题</text>
								</view>
								<view class="grid-info-item">
									<text class="grid-info-icon">⏱</text>
									<text class="grid-info-text">20分钟</text>
								</view>
								<view class="grid-info-item">
									<text class="grid-info-icon">⭐</text>
									<text class="grid-info-text">100分</text>
								</view>
								<view class="grid-info-item">
									<text class="grid-difficulty-stars">{{ getDifficultyStars(tech.level) }}</text>
								</view>
							</view>
							<view class="grid-start-button">
								<text class="grid-start-icon">▶</text>
							</view>
						</view>
					</view>
				</view>
			</view>

			<!-- 底部占位 -->
			<view class="bottom-placeholder"></view>
		</scroll-view>

		<!-- AI助手按钮 -->
		<AiChatButton buttonText="AI助手" />
	</view>
</template>

<script setup lang="ts">
	// 导入依赖
	import { ref, computed, onMounted } from 'vue';
	import { getAllTechnologiesAPI } from '@/services/technologies';
	import { getThemeStyles } from '@/stores/theme';
	import AiChatButton from '@/components/AiChatButton.vue';
	import { getDifficultyStars } from '@/utils/difficulty-stars';
	import type { Technology } from '@/types';

	// 响应式数据定义
	const techs = ref<Technology[]>([]); // 技术栈列表
	const loading = ref(false); // 加载状态
	const refreshing = ref(false); // 下拉刷新状态
	const isListMode = ref(true); // 显示模式：true为列表模式，false为网格模式

	// 计算属性
	const themeStyles = computed(() => getThemeStyles());
	const containerStyle = computed(() => ({
		background: themeStyles.value.bgGradient
	}));
	const safeDistance = computed(() => {
		return (uni.getSystemInfoSync().safeAreaInsets?.top || 0) + 20; // 安全区域 + 基础间距
	});

	// 生命周期钩子
	onMounted(() => {
		loadTechs();
	});


	// 加载技术栈列表
	const loadTechs = async (showLoading : boolean = false) => {
		try {
			if (showLoading) {
				loading.value = true;
			}
			const res = await getAllTechnologiesAPI();
			const technologies = res.data || [];
			technologies.forEach((tech) => {
				tech.tagsArray = tech.tags.split(',');
			});
			techs.value = technologies;
		} catch (error) {
			console.error('[Exam Page] 加载技术栈失败:', error);
			techs.value = [];
		} finally {
			if (showLoading) {
				loading.value = false;
			}
		}
	};

	// 处理下拉刷新
	const handleRefresh = async () => {
		refreshing.value = true;
		try {
			await loadTechs();
			setTimeout(() => {
				refreshing.value = false;
			}, 300);
		} catch (error) {
			console.error('[Exam Page] 刷新失败:', error);
			refreshing.value = false;
			uni.showToast({
				title: '刷新失败，请重试',
				icon: 'none',
				duration: 2000
			});
		}
	};

	// 切换显示模式
	const toggleDisplayMode = () => {
		isListMode.value = !isListMode.value;
	};

	// 开始测试，跳转到分类选择页面
	const handleStartExam = (tech : Technology) => {
		uni.navigateTo({
			url: `/pages/exam-records/category?channelCode=${tech.code}`
		});
	};
</script>

<style lang="scss" scoped>
	// 容器样式
	.exam-container {
		height: 100vh;
		display: flex;
		flex-direction: column;
		overflow: hidden;
		transition: background-color 0.3s ease;
	}

	// 顶部标题
	.header {
		flex-shrink: 0;
		width: 100%;
		padding-left: 32rpx;
		padding-right: 32rpx;
		padding-bottom: 32rpx;
		background: v-bind('themeStyles.bgPrimary');
		display: flex;
		justify-content: space-between;
		align-items: center;
		box-shadow: v-bind('themeStyles.cardBoxShadow');
		position: relative;
		z-index: 10;
		box-sizing: border-box;
	}

	.header-content {
		flex: 1;
		padding-right: 20rpx;
	}

	.header-title {
		font-size: 48rpx;
		font-weight: 900;
		color: v-bind('themeStyles.textPrimary');
		display: block;
		margin-bottom: 8rpx;
		background: v-bind('themeStyles.primaryGradient');
		-webkit-background-clip: text;
		-webkit-text-fill-color: transparent;
		background-clip: text;
	}

	.header-subtitle {
		font-size: 26rpx;
		color: v-bind('themeStyles.textSecondary');
		font-weight: 500;
	}

	.test-badge {
		width: 80rpx;
		height: 80rpx;
		background: v-bind('themeStyles.primaryGradient');
		border-radius: 50%;
		display: flex;
		align-items: center;
		justify-content: center;
		box-shadow: v-bind('themeStyles.buttonBoxShadow');
	}

	.badge-icon {
		font-size: 48rpx;
	}

	// 显示模式切换按钮
	.display-mode-toggle {
		width: 72rpx;
		height: 72rpx;
		background: v-bind('themeStyles.bgTertiary');
		backdrop-filter: blur(10rpx);
		border-radius: 50%;
		display: flex;
		align-items: center;
		justify-content: center;
		box-shadow: v-bind('themeStyles.buttonBoxShadow');
		border: 1rpx solid v-bind('themeStyles.borderColor');
		margin-right: 16rpx;
		transition: all 0.3s ease;

		&:active {
			transform: scale(0.95);
			background: v-bind('themeStyles.bgSecondary');
		}
	}

	.toggle-icon {
		font-size: 32rpx;
		color: v-bind('themeStyles.primaryColor');
		font-weight: bold;
		transition: all 0.3s ease;

		&.grid-icon {
			font-size: 28rpx;
		}
	}

	// 滚动区域
	.tech-scroll {
		flex: 1;
		height: 0;
		padding: 0 24rpx;
		width: 100%;
		box-sizing: border-box;
	}

	// 隐藏滚动条
	.tech-scroll ::-webkit-scrollbar {
		display: none;
		width: 0;
		height: 0;
		background: transparent;
	}

	.tech-list {
		display: flex;
		flex-direction: column;
		gap: 20rpx;
		padding-top: 24rpx;
	}

	// 网格视图样式
	.tech-grid {
		display: flex;
		flex-direction: row;
		flex-wrap: wrap;
		justify-content: space-between;
		gap: 28rpx;
		padding-top: 24rpx;
		padding-bottom: 20rpx;
	}

	// 技术卡片
	.tech-card {
		width: 100%; // 固定宽度，确保所有卡片宽度一致
		margin-bottom: 32rpx;
		border-radius: 24rpx;
		overflow: hidden;
		position: relative;
		background: v-bind('themeStyles.bgCard');
		border: 1rpx solid v-bind('themeStyles.borderColor');
		box-shadow: v-bind('themeStyles.cardBoxShadow');
		transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
		display: flex;
		flex-direction: column;
		height: 444rpx; // 固定高度，适应5行描述文字

		&::before {
			content: '';
			position: absolute;
			top: 0;
			left: 0;
			right: 0;
			bottom: 0;
			pointer-events: none;
			border-radius: 24rpx;
			opacity: 1;
			transition: opacity 0.3s ease;
		}

		&:active {
			transform: scale(0.97) translateY(-4rpx);
			box-shadow: v-bind('themeStyles.cardActiveBoxShadow');

			&::before {
				opacity: 0.8;
			}
		}
	}

	.card-body {
		padding: 32rpx;
		position: relative;
		z-index: 2;
		display: flex;
		flex-direction: column;
		flex: 1;
		min-height: 0;
	}

	// 卡片头部
	.card-header {
		display: flex;
		align-items: center;
		gap: 16rpx;
		margin-bottom: 20rpx;
	}

	.tech-icon {
		width: 100rpx;
		height: 100rpx;
		background: v-bind('themeStyles.primaryGradient');
		border-radius: 20rpx;
		display: flex;
		align-items: center;
		justify-content: center;
		box-shadow: v-bind('themeStyles.buttonBoxShadow');
		margin-right: 24rpx;
		font-size: 64rpx;
		line-height: 1;
	}

	.tech-info {
		flex: 1;
		display: flex;
		flex-direction: column;
		gap: 6rpx;
	}

	.tech-name {
		font-size: 36rpx;
		font-weight: 900;
		color: v-bind('themeStyles.textPrimary');
		line-height: 1.2;
		text-shadow: 0 1rpx 3rpx rgba(255, 255, 255, 0.8);
		letter-spacing: 1rpx;
	}

	.tech-difficulty {
		font-size: 24rpx;
		color: v-bind('themeStyles.textSecondary');
		font-weight: 600;
		text-shadow: 0 1rpx 2rpx rgba(255, 255, 255, 0.6);
	}

	.start-button {
		width: 72rpx;
		height: 72rpx;
		background: v-bind('themeStyles.bgTertiary');
		backdrop-filter: blur(10rpx);
		border-radius: 50%;
		display: flex;
		align-items: center;
		justify-content: center;
		box-shadow: v-bind('themeStyles.buttonBoxShadow');
		border: 1rpx solid v-bind('themeStyles.borderColor');
	}

	.start-icon {
		font-size: 36rpx;
		color: v-bind('themeStyles.primaryColor');
		line-height: 1;
		text-shadow: none;
	}

	// 描述
	.tech-description {
		font-size: 26rpx;
		color: v-bind('themeStyles.textSecondary');
		line-height: 1.7;
		margin-bottom: 20rpx;
		height: 132rpx; // 固定高度，约5行文字
		overflow: hidden;
		display: -webkit-box;
		-webkit-line-clamp: 5;
		line-clamp: 5; // 标准属性，兼容性
		-webkit-box-orient: vertical;
	}

	// 标签
	.tech-tags {
		display: flex;
		gap: 8rpx;
		flex-wrap: wrap;
		margin-bottom: 24rpx;
		min-height: 60rpx; // 固定最小高度，约2行标签
		align-content: flex-start; // 标签从顶部开始排列
	}

	.tag {
		padding: 8rpx 16rpx;
		background: v-bind('themeStyles.bgTertiary');
		border-radius: 12rpx;
		border: 1rpx solid v-bind('themeStyles.borderColor');
		box-shadow: none;
	}

	.tag-text {
		font-size: 22rpx;
		color: v-bind('themeStyles.textSecondary');
		font-weight: 700;
	}

	// 底部信息
	.card-footer {
		display: flex;
		justify-content: space-around;
		padding-top: 20rpx;
		border-top: 1rpx solid v-bind('themeStyles.borderColor');
		margin-top: auto;
		flex-shrink: 0;
	}

	.info-item {
		display: flex;
		align-items: center;
		gap: 8rpx;
	}

	.info-icon {
		font-size: 28rpx;
	}

	.info-text {
		font-size: 24rpx;
		font-weight: 800;
		color: v-bind('themeStyles.textPrimary');
	}

	// 网格卡片样式
	.grid-tech-card {
		width: calc(50% - 20rpx) !important; // 两列布局，强制设置宽度
		margin: 0 !important; // 移除默认margin
		border-radius: 20rpx;
		overflow: hidden;
		position: relative;
		background: v-bind('themeStyles.bgCard');
		border: 1rpx solid v-bind('themeStyles.borderColor');
		box-shadow: v-bind('themeStyles.cardBoxShadow');
		transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
		display: flex;
		flex-direction: column;
		min-height: 360rpx; // 网格模式下的最小高度，内容可自适应扩展

		&:active {
			transform: scale(0.97) translateY(-4rpx);
			box-shadow: v-bind('themeStyles.cardActiveBoxShadow');
		}
	}

	.grid-card-body {
		padding: 20rpx;
		position: relative;
		z-index: 2;
		display: flex;
		flex-direction: column;
		flex: 1;
		min-height: 0;
	}

	// 网格卡片头部
	.grid-card-header {
		display: flex;
		flex-direction: column;
		align-items: center;
		margin-bottom: 16rpx;
	}

	.grid-tech-icon {
		width: 60rpx;
		height: 60rpx;
		background: v-bind('themeStyles.primaryGradient');
		border-radius: 16rpx;
		display: flex;
		align-items: center;
		justify-content: center;
		box-shadow: v-bind('themeStyles.buttonBoxShadow');
		margin-bottom: 8rpx;
		font-size: 36rpx;
		line-height: 1;
	}

	.grid-tech-name {
		font-size: 28rpx;
		font-weight: 900;
		color: v-bind('themeStyles.textPrimary');
		line-height: 1.2;
		text-align: center;
		text-shadow: 0 1rpx 3rpx rgba(255, 255, 255, 0.8);
	}

	// 网格描述
	.grid-tech-description {
		font-size: 22rpx;
		color: v-bind('themeStyles.textSecondary');
		line-height: 1.5;
		margin-bottom: 12rpx;
		// 移除固定高度限制，让描述内容自适应显示
	}

	// 网格标签
	.grid-tech-tags {
		display: flex;
		gap: 6rpx;
		flex-wrap: wrap;
		margin-bottom: 12rpx;
		min-height: 32rpx;
		align-content: flex-start;
	}

	.grid-tag {
		padding: 4rpx 8rpx;
		background: v-bind('themeStyles.bgTertiary');
		border-radius: 8rpx;
		border: 1rpx solid v-bind('themeStyles.borderColor');
	}

	.grid-tag-text {
		font-size: 18rpx;
		color: v-bind('themeStyles.textSecondary');
		font-weight: 700;
	}

	.grid-more-tags {
		font-size: 18rpx;
		color: v-bind('themeStyles.textTertiary');
		padding: 4rpx 8rpx;
	}

	// 网格底部信息
	.grid-card-footer {
		display: flex;
		justify-content: space-between;
		align-items: center;
		margin-top: auto;
		padding-top: 12rpx;
		border-top: 1rpx solid v-bind('themeStyles.borderColor');
	}

	.grid-info-items {
		display: flex;
		gap: 8rpx;
		flex-wrap: wrap;
	}

	.grid-info-item {
		display: flex;
		align-items: center;
		gap: 4rpx;
		padding: 2rpx 6rpx;
		background: v-bind('themeStyles.bgTertiary');
		border-radius: 8rpx;
		border: 1rpx solid v-bind('themeStyles.borderColor');
	}

	.grid-info-icon {
		font-size: 16rpx;
		line-height: 1;
	}

	.grid-info-text {
		font-size: 16rpx;
		color: v-bind('themeStyles.textSecondary');
		font-weight: 600;
		line-height: 1;
	}

	.grid-start-button {
		width: 48rpx;
		height: 48rpx;
		background: v-bind('themeStyles.bgTertiary');
		backdrop-filter: blur(10rpx);
		border-radius: 50%;
		display: flex;
		align-items: center;
		justify-content: center;
		box-shadow: v-bind('themeStyles.buttonBoxShadow');
		border: 1rpx solid v-bind('themeStyles.borderColor');
	}

	.grid-start-icon {
		font-size: 24rpx;
		color: v-bind('themeStyles.primaryColor');
		line-height: 1;
	}

	.grid-difficulty-stars {
		font-size: 14rpx;
		color: #FFD700; // 统一金色
		font-weight: bold;
		line-height: 1;
		letter-spacing: 1rpx;
		text-shadow: 0 1rpx 2rpx rgba(0, 0, 0, 0.3); // 添加文字阴影增强可读性
	}

	// 列表视图星星样式
	.difficulty-stars {
		color: #FFD700; // 统一金色
		font-weight: bold;
		text-shadow: 0 1rpx 2rpx rgba(0, 0, 0, 0.2);
	}

	// 底部占位
	.bottom-placeholder {
		height: 120rpx;
	}
</style>